<template lang="html">
  <div class="global">
    <div class="header">
      <span class="date">{{showDate[0]}}年{{showDate[1]}}月</span>
      <picker class="picker" :value="pickerDate" start="2018-01" end="2025-12" mode='date' fields='month' @change="dateChange">
        <image src='http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180521/2018052109593142228.jpg'></image>
      </picker>
    </div>
    <div class="mask"></div>
    <div class="g-content">
      <div class="content" @click="toBillDetail(item.district_id, item.room_id, item.bill_list)" v-for="(item, index) in list" :key="index">
        <div class="title">{{item.district_name}}{{item.building}}栋{{item.room_name}}</div>
        <div class="section" v-for="(item2, index2) in item.bill_list" :key="index2" >
          <div class="top">
            <div class="left">
              <image v-show="item2.btype == 1 || item2.btype == 4" src='http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180521/2018052111260094658.jpg'></image>
              <image v-show="item2.btype == 2 || item2.btype == 5" src='http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180521/2018052111262354252.jpg'></image>
              <image v-show="item2.btype == 3 || item2.btype == 6" src='http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180521/2018052111262354252.jpg'></image>
              <span v-show="item2.btype == 1">房租账单</span>
              <span v-show="item2.btype == 2">水电费账单</span>
              <span v-show="item2.btype == 3">其他账单</span>
              <span v-show="item2.btype == 4">自定义房租账单</span>
              <span v-show="item2.btype == 5">自定义水电费账单</span>
              <span v-show="item2.btype == 6">首期房租账单</span>
              <span class="gray">({{item2.start_date}}至{{item2.end_date}})</span>
            </div>
            <span class="right unpaid" v-if="item2.bstatus == 1">待支付</span>
            <span class="right paid" v-if="item2.bstatus == 2">已支付</span>
            <span class="right invalid" v-if="item2.bstatus == 3">已作废</span>
          </div>
          <div class="bottom">
            <div class="left">最晚支付日：{{item2.deadline_date}}</div>
            <div class="right">￥{{item2.amount}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import store from '@/store/store'
export default {
  data () {
    return {
      showDate: [],
      pickerDate: '',
      list: []
    }
  },
  onShow () {
    var curDate = new Date()
    this.pickerDate = curDate.getFullYear() + '-' + (curDate.getMonth() + 1 < 10 ? '0' + (curDate.getMonth() + 1) : (curDate.getMonth() + 1))
    this.showDate[0] = curDate.getFullYear()
    this.showDate[1] = curDate.getMonth() + 1
    this.opbilllist(this.showDate[0], this.showDate[1])
  },
  methods: {
    dateChange (e) {
      this.pickerDate = e.mp.detail.value
      this.showDate = this.pickerDate.split('-')
      this.opbilllist(this.showDate[0], this.showDate[1])
    },
    toBillDetail (districtId, roomId, billList) {
      let bids = ''
      for (var i = 0; i < billList.length; i++) {
        if (i === 0) {
          bids = '' + billList[i].bid
        } else {
          bids = bids + ',' + billList[i].bid
        }
      }
      store.commit('setDate', this.showDate)
      store.commit('setBids', bids)
      this.$router.push({ path: '/pages/bill/bill_detail/main', query: { districtId: districtId, roomId: roomId } })
    },
    opbilllist (year, month) {
      var param = {}
      param['year'] = year
      param['month'] = month
      const opbilllist = api.opbilllist(param)
      opbilllist.then(d => {
        if (d.code === 200) {
          this.list = d.data.list
        }
      })
      .catch((e) => {
        console.log(e)
      })
    }
  }
}
</script>

<style lang="css">
  @import "./bill_overview.css";
</style>
